<html>
     <head>
         <style type="text/css">
body {
 
  overflow: hidden;
}

/* body {

  overflow: hidden;
} */


/* .diamond {
  background-color: #FFDF00;
  filter: blur(0.6px);
} */

/* .orb, .text {
  background-color: #002776;
} */
/* 
.stars {
  background-color: #FFFFFF;
} */

.center {
  height: 70vmin;
  width: 70vmin;
  margin: 15vmin auto;
  transform-style: preserve-3d;
  perspective: 20000px;
  transition: transform 2s;
  position: relative;
}
.center .diamond {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: box-shadow 2s;
}
.center .diamond:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: box-shadow 2s;
  box-shadow: 0px 0px 0px black;
}

/* .center:hover {
  transform: rotateX(10deg) rotateY(-0.5deg) rotateZ(-5deg);
}
.center:hover .diamond {
  box-shadow: inset 0px 0px 0px black;
}
.center:hover .diamond:after {
  box-shadow: 10px 10px 10px black;
}

.diamond {
  box-shadow: inset 4px 4px 10px 2px black;
  transform: translateZ(-100px) rotateX(45deg) rotateZ(45deg);
} */

/* .orb {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  border-radius: 100%;
  box-shadow: 5px 5px 20px 2px black;
  transform: translateZ(400px);
  transform-style: preserve-3d;
} */
.orb {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  border-radius: 100%;

  transform: translateZ(400px);
  transform-style: preserve-3d;
}
/* .orb:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  transform: translateZ(0px);
  background-color: red;
  background: radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%, rgba(0, 0, 0, 0.2525210768) 80%);
} */
.orb .arc2 {
  position: absolute;
  width: 300px;
  top: -0%;
  left: -0%;
  height: 300px;
  transform: translateZ(0px) rotateX(30deg) rotateY(60deg) rotateZ(0deg);
  border-radius: 100%;
  overflow: hidden;
  animation: loop 20s infinite;
  animation-timing-function: linear;
}
.orb .arc2 img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* .cycle{

    border-color: red;
    border-width: 15px;
    border-style: solid;
    border-radius: 50%;
    width: 220px;
    height: 220px;
} */

@keyframes loop {
  0% {
    transform:translateZ(0px) rotateX(30deg) rotateY(60deg) rotateZ(0deg);
  }
  100% {
    transform:translateZ(0px) rotateX(30deg) rotateY(60deg) rotateZ(360deg);
  }
}
         </style>
     </head>

     <body>

        <div class="center">
            <div class="diamond"></div>
            <div class="orb">
              <div class="stars">
                  <img src="images/carbon.png" alt="carbon" width="300" height="300"/>
              </div>
              <div class="arc2">
                <img src="images/cycle.png"></img>
                <!-- <div class="cycle">

                </div> -->
              </div>
            </div>  
          </div>
          
     </body>
</html>